/*
*选择题收集
*/
<template>
  <div id="select_topic">
    <div>
      <!-- 选择题题目 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <!-- 数组的长度 -->
          <span>
            一 、选择题 ( 本题共{{testPaperInfos.length}}道小题,共
            <span
              class="topic-grade"
            >{{selectTopicM}}/{{sums}}</span>分 )
          </span>
        </div>
        <!-- 卡片内容： -->
        <div v-for="(item,index) in testPaperInfos" :key="index" class="item">
          <el-form :model="item" class="demo-form" label-width="100px">
            <el-form-item :label="index+1 +'、'">
              <span v-show="!item.editing">{{item.tpqQuestion.questionTitle}}</span>
              <el-input-number v-model="item.tpqScore" :min="0" size="small" v-show="!item.editing" @change="scoreChange(item)"></el-input-number>
              <el-input
                type="textarea"
                v-model="item.tpqQuestion.questionTitle"
                v-show="item.editing"
                autosize
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="answers">
                <div
                  class="answerLine"
                  v-for="(opts,indexs) in item.tpqQuestion.chooseQuestion"
                  :key="indexs"
                >
                  <div class="optionBox">
                    <el-checkbox
                      slot="prepend"
                      v-model="opts.cqIsRight"
                      :disabled="!item.editing"
                    >{{String.fromCharCode(65+indexs)}}、</el-checkbox>
                  </div>
                  <div class="anwserInput">
                    <div v-show="!item.editing">{{opts.cqOption}}</div>
                    <div class="theInput" v-show="item.editing">
                      <el-input v-model="opts.cqOption" size="small"></el-input>
                    </div>
                    <div class="delBtn" v-show="item.editing">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        size="small"
                        @click="delOption(indexs,item)"
                        v-show="item.tpqQuestion.chooseQuestion.length>2"
                      ></el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button round size="small" @click="compileTopic(item)">编辑</el-button>
              <el-button
                round
                size="small"
                @click="cancelCompileTopic(index)"
                v-show="item.editing"
              >取消</el-button>
              <el-button
                round
                size="small"
                @click="addTopicAnswer(item)"
                v-show="item.editing"
                :disabled="item.tpqQuestion.chooseQuestion.length > 5"
              >新增选项</el-button>
              <el-button
                round
                size="small"
                @click="changTopicAnswer(item)"
                v-show="item.editing"
                type="primary"
                plain
              >保存修改</el-button>
              <el-button
                round
                size="small"
                @click="deleTopic(item,index)"
                v-show="item.editing"
                type="danger"
                plain
              >删除题目</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  props: ["teStPaperInfo", "sum"],
  data() {
    return {
      sums: 0,
      primeval: {},
      testPaperInfos: [] //选择题题目
    };
  },
  methods: {
    //题目新增答案
    addTopicAnswer(item) {
      item.tpqQuestion.chooseQuestion.push({
        //新增一个对象
        cqId: 0,
        cqIsRight: false,
        cqOption: "",
        cqQuestionId: 0
      });
    },
    //保存修改题目
    changTopicAnswer(item) {
      let _this = this;
      if (!item.tpqQuestion.questionTitle.trim()) {
        _this.$message.warning("题目不能为空");
      } else {
        //如果是输入的答案都选上了为true
        let t = true;
        for (let i = 0; i < item.tpqQuestion.chooseQuestion.length; i++) {
          if (!item.tpqQuestion.chooseQuestion[i].cqOption.trim()) {
            t = false;
            _this.$message.warning(
              "请输入选项" + String.fromCharCode(65 + i) + "的内容"
            );
            break;
          }
        }
        if (t) {
          //看是否有正确答案 如果没有则会返回-1
          let index = item.tpqQuestion.chooseQuestion.findIndex(
            e => e.cqIsRight == true
          );
          if (index == -1) {
            _this.$message.warning("请选择一个正确的答案");
          }
          //初始数组
          let newPrimeval = item.primeval.tpqQuestion.chooseQuestion; //原始数据
          let newItem = item.tpqQuestion.chooseQuestion; //新数据
          let t1 = false;
          if (newPrimeval.length == newItem.length &&item.primeval.tpqQuestion.questionTitle==item.tpqQuestion.questionTitle.trim()) {//判断两个数组长度是否一致
            for (let i = 0; i < newItem.length; i++) {
              if (//长度一致时判断选项信息是否变化
                newItem[i].cqIsRight != newPrimeval[i].cqIsRight ||
                newItem[i].cqOption != newPrimeval[i].cqOption
              ) {
                t1 = true;
                break;
              }
            }
          } else {//如果不一致，说明选项个数变化了
            t1 = true;
          }
          if (t1 == true) {
            _this.axios
              .post("/api/TestPaper/ModifyQuestion", {
                questionId: item.tpqQuestion.questionId, //题目ID
                questionTitle: item.tpqQuestion.questionTitle, //题干
                questionTypeId: item.tpqQuestion.questionTypeId, //题目类型
                chooseQuestion: item.tpqQuestion.chooseQuestion //选项数组
              })
              .then(res => {
                if (res.data.code == 1) {
                  _this.testPaperInfos.forEach(e => {
                    if (e.tpqId == item.tpqId) {
                      e = item;
                      item.editing = false;
                      _this.$message.success(res.data.message);
                    }
                  });
                }
              })
              .catch(e => {
                console.log(e);
              });
          } else {
            _this.$message.warning("值没有发生变化");
          }
        }
      }
    },
    //编辑
    compileTopic(item) {
      item.editing = true; //更改编辑状态
      item.primeval = JSON.parse(JSON.stringify(item)); //将原始题目信息暂存
    },
    //取消
    cancelCompileTopic(i) {
      let primaryInfo = this.testPaperInfos[i].primeval;
      primaryInfo.editing = false; //更改编辑状态
      this.$set(this.testPaperInfos, i, primaryInfo); //将当前题目信息还原为原始题目信息
    },
    //删除题目
    deleTopic(item, index) {
      let _this = this;
      _this
        .$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.axios
            .post(
              "/api/TestPaper/RemoveQuestionFromTestPaper?paperQuestionId=" +
                item.tpqId //题目ID
            )
            .then(res => {
              if (res.data.code == 1) {
                _this.testPaperInfos.splice(index, 1); //更新数组信息
                _this.$message.success(res.data.message);
              }
              console.log(res);
            })
            .catch(e => {
              console.log(e);
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    scoreChange(obj) {
      //修改分数方法
      this.axios.post("/api/TestPaper/ModifyScore", {
        tpqId: obj.tpqId, //主键编号
        tpqScore:obj.tpqScore, //小题分数
      }).then(res => {
        if (res.data.code == 1) {
          //请求数据，判断返回状态
          this.$message.success(res.data.message);
        } else {
          this.$message.info(res.data.message);
        }
      });
    },
    delOption(index,item){
      console.log(index,item)
       item.tpqQuestion.chooseQuestion.splice(index,1)
    },
    //选择题分数传给父组件
    seleTopicM() {
      this.$emit("seleTopicM", this.selectTopicM);
    }
  },
  watch: {
    teStPaperInfo(newVal) {
      //把父组件传过来的数据转换为字符串 ---- 这转换为对象 ---就可以进行操作了
      let newVal1 = JSON.parse(JSON.stringify(newVal));
      this.testPaperInfos = newVal1.questions.filter(
        item => item.tpqQuestion.questionTypeId == 1
      );//试卷信息过滤
    },

    sum(newVal) {
      this.sums = parseInt(newVal);
    }
  },
  computed: {
    //选择题小题分数
    selectTopicM() {
      let _this = this;
      // 迭代所有的元素最终返回一个值
      let m = _this.testPaperInfos.reduce((sum, item) => {
        return sum + item.tpqScore;
      }, 0);
      return m;
    }
  },
  updated() {
    this.seleTopicM();
  }
};
</script>
<style lang="less" scoped>
// 选择题目试卷类容
.topic-grade {
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}
.testInfo form {
  width: 50%;
  margin: auto;
  .el-button {
    display: block;
    margin: auto;
  }
}
.quesType {
  margin-left: 10px;
}
.questionTab {
  margin-top: 20px;
}
.answerLine {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
}
.optionBox {
  padding-right: 10px;
  text-align: right;
  vertical-align: middle;
  .el-checkbox {
    line-height: 30px;
  }
}
.anwserInput {
  width: 100%;
  box-sizing: border-box;
  display: flex;
}
.theInput {
  width: 100%;
}
.delBtn {
  padding-left: 15px;
}
</style>